<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像悬停叠加</title>
  <style>
    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      bottom: 0%;
      left: 0;
      right: 0;
      background-color: #008CBA;
      overflow: hidden;
      width: 100%;
      height: 0;
      transition: .5s ease;
    }

    .container:hover .overlay {
      height: 100%;
    }
  </style>
</head>
<body>
<div class="container">
  <img src="../tulip-red.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <img src="../tulip-yellow.jpg" alt="Avatar" class="image">
  </div>
</div>
</body>
</html>